<template>
    <div>
        <h2>你当前点击的是谁：{{ clickName }}</h2>
        <h3>www</h3>
        <div class="max-box">
            <div v-for="item in list" :key="item.id" class="box">
                <son :item="item" @getson="changeName"></son>
            </div>
        </div>
    </div>
</template>

<script>
import son from './son.vue'
export default {
    data(){
        return {
            clickName:null,
            list:[
                {
                    id:1,
                    name:'沙滩',
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第一个数组中的内容吧",
                    price:150
                },
                {
                    id:2,
                    name:'椰子',
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第二个数组中的内容吧",
                    price:120
                },
                {
                    id:3,
                    name:'鲨鱼',
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第三个数组中的内容吧",
                    price:180
                },
                {
                    id:4,
                    name:'派大星',
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第四个数组中的内容吧",
                    price:240
                },
            ],
        }
    },
    methods:{
        changeName(val){
            this.clickName = val
        }
    },
    components:{
        son
    }
}
</script>

<style>
    .max-box{
        width: 1200px;
        height: 500px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    h2{
        text-align: center;
    }
    .box{
        width: 49%;
        border: 1px solid #c8c8c8;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
        text-align: center;
    }
</style>